<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-01-15 
 -->


<template>
  <div class='album' v-if="details">
    <div class="w1200">
      <div class="album-cover">
        <div class="album-img">
          <el-image :src="details.picUrl">
            <template v-slot:placeholder class="image-slot">
              <i class="iconfont icon-placeholder"></i>
            </template>
          </el-image>
        </div>
        <div class="album-info">
          <div class="album-title">
            {{details.name}}
            <span>{{'#' + details.type}}</span>
          </div>
          <div class="album-singer">歌手：<router-link :to="{ path: '/singer', query: { id: author.id }}" class="song_name" v-for="(author, k) in details.artists" :key="author.name">{{ k !== 0 ? ' / ' + author.name : author.name }}</router-link>
          </div>
          <div class="album-time">发行时间：{{formartDate(details.publishTime, 'yyyy-MM-dd')}}</div>
          <div class="album-company">发行公司：{{details.company}}</div>
          <div class="album-desc" v-if="details.description">
            <h5>歌单简介<em class="desc-close" v-if="isShowDesc" @click="isShowDesc = false"><i class="iconfont icon-closed"></i></em></h5>
            <p @click="showAllDesc">{{details.description}}</p>
            <pre class="album-desc-all" v-if="isShowDesc">
                            {{details.description}}
                        </pre>
          </div>
        </div>
      </div>
      <div class="detail-container">
        <div class="detail-main">
          <div class="song-header">
            <h4>包含歌曲列表 <em>{{details.size + '首歌'}}</em></h4>
            <span class="play-all" @click="playAllSongs"><i class="iconfont icon-audio-play"></i> 播放全部</span>
            <span :class="['collect', dynamic.isSub ? 'active' : '']" @click="subAlbum"><i :class="['iconfont', 'icon-collect' + (dynamic.isSub ? '-active' : '')]"></i> {{ dynamic.isSub ? '已收藏' : '收藏'}}</span>
          </div>
          <song-list :songList="songList" :stripe="true"></song-list>
          <div class="album-comments" ref=comment>
            <comment-list :type="type" :sId="albumId"></comment-list>
          </div>
        </div>
        <div class="detail-aside">
          <h3 class="aside-title">{{details.artists[0].name}}的其他专辑<router-link :to="{ path: '/singer', query: { id: details.artists[0].id, type: 'album' }}" class="album-more">全部>></router-link>
          </h3>
          <div class="aside-main aside-album-main">
            <router-link class="aside-album-item" :to="{ path: '/album', query: { id: item.id }}" v-for="item in hotAlbums" :key="item.id">
              <el-image :src="item.picUrl">
                <template v-slot:placeholder class="image-slot">
                  <i class="iconfont icon-placeholder"></i>
                </template>
              </el-image>
              <div class="aside-album-info">
                <div class="aside-album-name">{{item.name}}</div>
                <div class="aside-album-time">
                  {{formartDate(details.publishTime, 'yyyy-MM-dd')}}
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { ALBUM, ALBUMDYNAMIC, ARTISTALBUM, ALBUMSUB } from "@/api";
import { useInstance } from "@/hooks";
import { formartDate, formatSongs } from "@/utils";
import { onBeforeRouteUpdate } from 'vue-router';
export default defineComponent({
  name: 'index',
  setup(props, { emit, slots }) {
    const { $router: router, $Message: $message, $store: store } = useInstance();
    const { info, } = initializeData();
    const { _initialize, } = initializeRequest(info, $message);
    // 专辑简介查看更多
    const showAllDesc = () => {
      if (info.details.description.length > 120) {
        info.isShowDesc = !info.isShowDesc
      }
    };
    const playAllSongs = () => {
      store.dispatch('playAll', { list: info.songList });
      store.commit('SET_PLAYLISTTIPS', true);
    };
    const subAlbum = async () => {
      const { code } = await ALBUMSUB({ id: info.albumId, t: Number(!info.dynamic.isSub) })
      if (code !== 200) return $message.error('数据请求失败')
      info.dynamic.isSub = Number(!info.dynamic.isSub)
    };
    onMounted(() => {
      info.albumId = router.currentRoute.value.query.id;
      _initialize()
    });

    onBeforeRouteUpdate((to) => {
      info.albumId = to.query.id;
      _initialize()
    })
    return {
      formartDate,
      ...toRefs(info),
      showAllDesc,
      playAllSongs,
      subAlbum
    }
  }
});
function initializeData() {
  const info = reactive({// 歌单详情
    albumId: '',
    details: null,
    songList: [],
    dynamic: {},
    hotAlbums: [],
    comments: [],
    type: 3, // 0: 歌曲 1: mv 2: 歌单 3: 专辑  4: 电台 5: 视频 6: 动态
    isShowDesc: false
  });
  return {
    info
  }
}
function initializeRequest(info, $message) {
  // 相关歌单推荐
  const getAlbum = async (params) => {
    console.log(params);
    const { code, album, songs } = await ALBUM(params)
    if (code !== 200) return $message.error('数据请求失败');
    info.details = album;
    info.songList = formatSongs(songs);
    getArtistAlbum();
  };

  const getAlbumDynamic = async (params) => {
    const data = await ALBUMDYNAMIC(params)
    if (data.code !== 200) return $message.error('数据请求失败');
    info.dynamic = data
  };
  const getArtistAlbum = async () => {
    const { code, hotAlbums } = await ARTISTALBUM({ id: info.details.artists[0].id, limit: 5 })
    if (code !== 200) return $message.error('数据请求失败');
    info.hotAlbums = hotAlbums
  };
  const _initialize = () => {
    getAlbum({ id: info.albumId })
    getAlbumDynamic({ id: info.albumId })
  };
  return {
    _initialize
  }
}
</script>

<style scoped lang="scss">
.detail-container {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
}
.detail-main {
  flex: 1;
  padding-bottom: 100px;
  overflow: hidden;
}
.detail-aside {
  width: 300px;
  padding-left: 20px;

  .aside-title {
    position: relative;
    font-size: 16px;
    line-height: 24px;

    .album-more {
      display: inline-block;
      position: absolute;
      right: 0;
      top: 0;
      font-weight: normal;
      font-size: 12px;
      color: #666;
    }

    &::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 18px;
      margin: 3px 5px 0 0;
      border-radius: 2px;
      background: $color-theme;
      vertical-align: top;
    }
  }
}
.album-cover {
  display: flex;
  padding: 40px 0;
}
.album-img {
  position: relative;
  width: 260px;
  height: 260px;

  .el-image {
    z-index: 2;
  }

  &::after {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    right: -40px;
    width: 100%;
    height: 100%;
    background: url("~@/assets/img/disc.png") no-repeat;
    background-size: contain;
    transition: all 0.4s linear;
  }
}
.album-info {
  flex: 1;
  padding-left: 70px;

  .album-title {
    padding-bottom: 20px;
    font-size: 24px;
    font-weight: bold;

    span {
      display: inline-block;
      font-size: 14px;
      font-weight: normal;
      color: $color-theme;
    }
  }
  .album-singer,
  .album-time,
  .album-company {
    line-height: 22px;
    font-size: 14px;
    color: #999;
  }

  .album-desc {
    position: relative;

    h5 {
      padding: 30px 0 5px;
      line-height: 20px;
      font-size: 14px;
      color: #333;
    }

    .desc-close {
      position: absolute;
      top: 30px;
      right: 0;
      cursor: pointer;
    }

    p {
      display: -webkit-box;
      line-height: 22px;
      font-size: 14px;
      color: #999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: pre-line;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      word-break: break-all;
      cursor: pointer;
    }

    .album-desc-all {
      position: absolute;
      top: 70px;
      left: 10px;
      z-index: 1;
      width: calc("100% - 20px");
      padding: 10px;
      margin: -10px;
      max-height: 250px;
      line-height: 22px;
      font-size: 14px;
      white-space: pre-line;
      font-family: inherit;
      color: #999;
      background: #fff;
      overflow-y: scroll;
      box-shadow: 0 2px 10px 0 rgba(52, 52, 52, 0.1);
    }
  }
}
.song-header {
  display: flex;
  padding: 0 0 10px;

  h4 {
    flex: 1;
    font-size: 20px;
    line-height: 40px;

    em {
      display: inline-block;
      padding-left: 10px;
      font-size: 12px;
      line-height: 14px;
      font-style: normal;
      font-weight: normal;
      color: #666;
      vertical-align: baseline;
    }
  }

  span {
    display: flex;
    line-height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    padding: 7px 20px;
    cursor: pointer;
    margin: 5px 0 5px 15px;
    transition: all 0.4s;
    background: #f0f0f0;
    color: #333;

    i {
      margin-right: 3px;
    }
  }

  .play-all {
    color: #fff;
    background: $color-theme;

    i {
      color: #fff;
    }
  }

  .collect.active,
  .collect.active i {
    color: $color-theme;
  }
}
.aside-album-item {
  display: flex;
  padding: 10px 0;

  .el-image {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
  }

  .aside-album-info {
    flex: 1;
    padding-left: 10px;
  }

  .aside-album-name {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    cursor: pointer;
  }

  .aside-album-time {
    height: 20px;
    line-height: 20px;
    margin-top: 20px;
    font-size: 12px;
    color: #999;
  }
}
</style>

